<template>
    <el-form ref="form" :model="form" class="size-auto width-100" :rules="rules" :inline="true" size="medium" label-width="130px">
        <CardBox v-for="(item, index) in form[listName]" :key="item.id" :title="item.jobAreaName ? `${item.projectName}-${item.jobAreaName}` : `${item.projectName}`" :footer="true">
            <el-row :gutter="24">
                <el-col v-if="item.workAmount" :span="8" class="item">
                    <span class="label">工程量：</span>
                    <span class="value">{{ item.workAmount }}{{ item.arithmeticalUnit }}</span>
                </el-col>
                <el-col :span="8" class="item">
                    <span class="label">计划完成金额：</span>
                    <span class="value">{{ item.prepareCompletionMoney }}元</span>
                </el-col>
            </el-row>
            <template slot="footer">
                <el-row :gutter="24">
                    <el-col :span="24" class="card-title">实施报告</el-col>
                    <el-col :xl="6" :lg="8">
                        <el-col :span="15" style="padding-left: 0;">
                            <el-form-item label="桩号">
                                <el-input v-model.number.trim="item.startStake" placeholder="请输入">
                                    <i slot="prefix" class="el-input__icon input-unit">K</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label-width="30px" label="~">
                                <el-input v-model.number.trim="item.endStake" placeholder="请输入">
                                    <i slot="prefix" class="el-input__icon input-unit">K</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-col>
                    <el-col :xl="6" :lg="8">
                        <el-form-item label="本期实际完成量" :prop="`${listName}.${index}.completedAmount`" :rules="rules.completedAmount">
                            <el-input v-model.trim="item.completedAmount" placeholder="支持小数点后2位">
                                <i v-if="item.arithmeticalUnit" slot="suffix" class="el-input__icon input-unit">{{ item.arithmeticalUnit }}</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xl="6" :lg="8">
                        <el-form-item label="本期未完成量" :prop="`${listName}.${index}.unCompletedAmount`" :rules="rules.unCompletedAmount">
                            <el-input v-model.trim="item.unCompletedAmount" placeholder="支持小数点后2位">
                                <i v-if="item.arithmeticalUnit" slot="suffix" class="el-input__icon input-unit">{{ item.arithmeticalUnit }}</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xl="6" :lg="8">
                        <el-form-item label="本期实际完成金额" :prop="`${listName}.${index}.completedMoney`" :rules="rules.completedMoney">
                            <el-input v-model.trim="item.completedMoney" placeholder="支持小数点后2位">
                                <i slot="suffix" class="el-input__icon input-unit">元</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xl="6" :lg="8">
                        <el-form-item label="本期未完成金额" :prop="`${listName}.${index}.unCompletedMoney`" :rules="rules.unCompletedMoney">
                            <el-input v-model.trim="item.unCompletedMoney" placeholder="支持小数点后2位">
                                <i slot="suffix" class="el-input__icon input-unit">元</i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xl="6" :lg="8">
                        <div class="more" @click="showMore(index)">
                            <i class="el-icon-d-arrow-right" :class="{'arrow-top': moreStatus[index]}" />
                        </div>
                    </el-col>
                    <el-col class="contract" :class="{'show-contract': moreStatus[index]}" :span="24">
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="合同编号">
                                <el-input v-model.trim="item.contractNum" placeholder="请输入" />
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="合同金额" :prop="`${listName}.${index}.contractMoney`" :rules="rules.contractMoney">
                                <el-input v-model.trim="item.contractMoney" placeholder="请输入">
                                    <i slot="suffix" class="el-input__icon input-unit">元</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="单价" :prop="`${listName}.${index}.unitPrice`" :rules="rules.unitPrice">
                                <el-input v-model.trim="item.unitPrice" placeholder="请输入">
                                    <i slot="suffix" class="el-input__icon input-unit">元</i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="预计开/竣工时间">
                                <el-date-picker
                                    v-model="item.startEndTime"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%"
                                    :editable="false"
                                    range-separator="至"
                                    start-placeholder="开工时间"
                                    end-placeholder="竣工时间"
                                />
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
            </template>
        </CardBox>
    </el-form>
</template>

<script>

export default {
    name: 'FormCard',
    props: {
        title: {
            type: String,
            default: ''
        },
        form: {
            type: Object,
            default: () => ({ list: [{ id: 1 }] })
        },
        listName: {
            type: String,
            default: 'list'
        },
        rules: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            moreStatus: []
        }
    },
    methods: {
        showMore(index) {
            const ststus = !this.moreStatus[index]
            this.$set(this.moreStatus, index, ststus)
        },
        handleValidate() {
            return new Promise((resolve) => {
                this.$refs['form'].validate(valida => {
                    resolve(valida)
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 130px);
        }
    }    
}
::v-deep .el-date-editor .el-range-separator {
    min-width: 24px;
}
.margin-b-0 {
    margin-bottom: 0;
}
.more {
    font-weight: bold;
    font-size: 16px;
    padding: 0 24px;
    cursor: pointer;
    .el-icon-d-arrow-right {
        margin-right: 8px;
        transition: 0.3s;
        transform: rotate(90deg)
    }
    .arrow-top {
        transform: rotate(-90deg)
    }
}
.contract {
    padding: 0 !important;
    margin: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}
.show-contract {
    max-height: 240px;
}
.card-title {
    font-size: 14px;
    font-weight: bold;
    color: #171725;
    margin-bottom: 16px;
}
</style>
